import Lottie from 'react-lottie-player';
import { useEffect, useState } from 'react';
import { Icon_Index_News } from '../../images/icons/News';
import { Icon_Index_Stock } from '../../images/icons/Price';
import homeAnimation from '../../lottie/home.json';
import { observer } from 'mobx-react';
import { Focus_bg1, Focus_bg2, Focus_bg3, Focus_bg4 } from '../../images/FocusBg';
import { researchStore } from '../../stores/ResearchStore';
import './Main.scss';
import { ResearchItem } from '../../services/ResearchService';
import ResearchItemPage from '../Research/ResearchItem';
import { useHistory } from 'react-router';
import { Link } from '../../components/Link';

export const Main = observer(() => {
  const [focusHeight, setheight] = useState(0);
  useEffect(() => {
    var focusRight = document.getElementsByClassName("focusRight")[0];
    setTimeout(() => {
      setheight(focusRight.clientHeight);
    }, 500)
  }, []);
  let history = useHistory();
  return (
    <div >
      <div className="section-5 wf-section mainWrapper">
        <div className="container-2 w-container">
          <div className="columns w-row">
            <div className="column-4 w-col w-col-6">
              <h1 className="heading-8">
                在 &nbsp;
                <span data-w-id="2df84f67-c9c0-c8ec-eb23-5d7357533117"
                >
                  Oli incubator
                </span>
                <br />
                <span className="subTitle">我们助力激发您的无限潜能</span>  <span data-w-id="2df84f67-c9c0-c8ec-eb23-5d735753311c" className="text-span-4"
                  style={{ color: 'rgb(129, 164, 240)' }}>.</span></h1>
              <div className="div-block-31">
                <img
                  src={Icon_Index_News}
                  loading="lazy" width="56" alt="" />

                <div className="div-block-32"><a href="/home" className="link-block-5 w-inline-block">
                  <h4 className="heading-9">oli 团队</h4>
                </a>
                  <p className="paragraph-4">我们具有强大的专家团队，涉猎多个不同专业领域. <br />
                  
                  <Link to='/advantage' >
                      Learn More
                    </Link></p>
                </div>
              </div>
              <div className="div-block-31"><img
                src={Icon_Index_Stock}
                loading="lazy" width="56" alt="" />
                <div className="div-block-32"><a href="/labs" className="link-block-5 w-inline-block">
                  <h4 className="heading-9">oli 服务</h4>
                </a>
                  <p className="paragraph-4">我们提供专业的服务资源，帮助中小企业的增长与壮大.
                    <br />

                    <Link to='/advantage' >
                      Learn More
                    </Link>
                    </p>
                </div>
              </div>
            </div>
            <div className="w-col w-col-6">
              <Lottie
                className="lottie-animation"
                style={{}}
                loop
                animationData={homeAnimation}
                play
              />
            </div>
          </div>
        </div>
        <div className="div-block-37"><img
          src="https://uploads-ssl.webflow.com/5d1f262a719f5884d8fee399/5fb47b1dacc0cadae640ead0_white_weave_bottom_div.svg"
          loading="lazy" alt="" className="image-21" /></div>
      </div>
      <div className="section-thesis-mobile wf-section">
        <div className="wrapper_left"></div>
      </div>
      <div className="section-8 wf-section">
        <div className="container-11 w-container">
          <div className="w-row">
            <div className="column-3 w-col w-col-6 focusLeft" style={{ height: focusHeight }}>
              <div className="left">
                <div className="top" style={{ backgroundImage: `url("${Focus_bg1}")` }}></div>
                <div className="bottom">
                  <img
                    src={Focus_bg2}
                    loading="lazy" alt="" />
                </div>
              </div>
              <div className="right">
                <div className="top">
                  <img
                    src={Focus_bg3}
                    loading="lazy" alt="" />
                </div>
                <div className="bottom" style={{ backgroundImage: `url("${Focus_bg4}")` }}></div>
              </div>
            </div>
            <div className="w-col w-col-6 focusRight">
              <h2 className="heading-16">Focus Area<span className="text-span-16">.</span></h2>
              <div className="w-layout-grid grid"><div id="w-node-fb242981-143b-8d9e-1fb7-2a0a88e9f639-74ca81ac"
                className="div-block-34 w-inline-block" onClick={() => {
                  window.scrollTo(0, 0);
                  history.push(`/watchlist`);
                }}>
                <div className="div-block-35">
                  <p className="paragraph-6">我们为创新而聚集在一起，为你构建一个优质的经济生态，一个高质量的投资规划，帮助你的创新落地和商业化，帮助中小企业的增长与壮大.</p>
                </div><img
                  src="https://uploads-ssl.webflow.com/5d1f262a719f5884d8fee399/5fb476d33c18f3a7fa78bd89_img_akin_home_card.png"
                  loading="lazy" alt="" />
              </div><div className="div-block-33 w-inline-block" onClick={() => {
                //  history.push(`/research`);
              }}>
                  <p className="paragraph-5">Oli incubator将站在产业前沿探索时代变革，致力于打造集创业平台、资金支持、专家咨询、投后服务等全方位创新投资生态网络.</p>
                </div>
                <div id="w-node-_0482cff9-9ba1-3fc9-da52-6fba2fb9b25f-74ca81ac" className="div-block-36" onClick={() => {
                  window.scrollTo(0, 0);
                  history.push(`/research`);
                }}>
                  <p className="paragraph-7">我们注重清洁能源、人工智能和金融科技的技术和商业创新，与世界前沿机构著名工程师和杰出科学家共同探索技术、产品、商业价值和数据的结合，助力前沿技术在商业领域的发展。这将适应全世界数字化转型潮流，我们为投资者与创新人搭建全方位的沟通桥梁，助力投资者与创新人推进社会进步.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
})


